<template>
	<view class="content">
		<view :prop="option" id="echarts-ltest" class="echarts"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option: {
					title: {
						text: 'ECharts 入门示例'
					},
					tooltip: {},
					legend: {
						data: ['销量']
					},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				}
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	import echarts from 'echarts'
	let myChart
	let that
	export default {
		mounted() {
			// alert(JSON.stringify(this.chartId))
			// that = this
			// setTimeout(() => {
			// 	if (typeof window.echarts === 'function') {
			// 		this.initEcharts()
			// 	} else {
			// 		// 动态引入较大类库避免影响页面展示
			// 		const script = document.createElement('script')
			// 		// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
			// 		script.src = 'static/echarts.min.js'
			// 		script.onload = this.initEcharts.bind(this)
			// 		document.head.appendChild(script)
			// 	}
			// }, 2000)
			this.initEcharts()
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts-ltest'))
				alert(JSON.stringify(this.option))
				// alert(JSON.stringify(this.option))
				// 观测更新的数据在 view 层可以直接访问到
				// alert('dfsfsfssfsfs')
				var base = +new Date(1968, 9, 3);
				var oneDay = 24 * 3600 * 1000;
				var date = [];
				
				var data = [Math.random() * 300];
				var dataa = [Math.random() * 300];
				var datab = [Math.random() * 300];
				
				for (var i = 1; i < 20000; i++) {
					var now = new Date(base += oneDay);
					date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'));
					data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
					dataa.push(Math.round((Math.random() - 0.5) * 200 + data[i - 1]));
					datab.push(Math.round((Math.random() - 0.5) * 2000 + data[i - 1]));
				}
				let option = {
					tooltip: {
						trigger: 'axis',
						position: function (pt) {
							return [pt[0], '10%'];
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						// data: that.xAxis,
						data: date
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%']
					},
					dataZoom: [{
						type: 'inside',
						start: 0,
						end: 10,
						preventDefaultMouseMove: false
					}],
					// series: that.series
					series: [
						{
							name: '模拟数据',
							type: 'line',
							smooth: true,
							symbol: 'none',
							sampling: 'average',
							itemStyle: {
								color: 'rgb(21, 255, 87)'
							},
							data: data
						},
						{
							name: '模拟数据2',
							type: 'line',
							smooth: true,
							symbol: 'none',
							sampling: 'average',
							itemStyle: {
								color: 'rgb(110, 105, 255)'
							},
							data: dataa
						},
						{
							name: '模拟数据3',
							type: 'line',
							smooth: true,
							symbol: 'none',
							sampling: 'average',
							itemStyle: {
								color: 'rgb(255, 31, 11)'
							},
							areaStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgb(255, 158, 68)'
								}, {
									offset: 1,
									color: 'rgb(255, 70, 131)'
								}])
							},
							data: datab
						}
					]
				};
				myChart.setOption(option)
			}
		}
	}
</script>

<style>
	.echarts{
		width: 100%;
		height: 500rpx;
	}
</style>
